<template>
  <div>
    <a-result
      status="success"
      :title="email"
      :sub-title="description"
    >
      <template #extra>
        <a-button type="primary">查看邮箱</a-button>
        <a-button style="margin-left: 8px" @click="goHomeHandle">返回首页</a-button>
      </template>
    </a-result>
    
    <ellipsis :length="10" tooltip>
      There were injuries alleged in three cases in 2015, and a
      fourth incident in September, according to the safety recall report. 
      After meeting with US regulators in October, the firm decided to issue a voluntary recall.
    </ellipsis>
  </div>
</template>

<script>
import { computed, defineComponent, getCurrentInstance, reactive, toRefs } from "vue"
import Ellipsis from '@/components/Ellipsis'

export default defineComponent({
  components: {
    Ellipsis
  },
  setup() {
    const { ctx } = getCurrentInstance()

    const info = ctx.$router.currentRoute._rawValue.params

    const v = info && info.email || 'xxx'

    const state = reactive({
      description: '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
      email: computed(() => `你的账户：${v} 注册成功`)
    })

    const goHomeHandle = () => {
      ctx.$router.push({ name: 'login' })
    }

    return {
      ...toRefs(state),
      goHomeHandle
    }
  }
})
</script>
